<template>
  <view class="container">
    <!-- 用户信息 -->
    <view class="user-info-card">
      <uni-card>
        <template v-slot:title>
          <text class="card-title">用户信息</text>
        </template>
        <view class="user-details">
          <view class="info-row">
            <text class="label">用户名：</text>
            <text class="value">{{ userInfo.userName }}</text>
          </view>
          <view class="info-row">
            <text class="label">用户昵称：</text>
            <text class="value">{{ userInfo.nickName || '-' }}</text>
          </view>
          <view class="info-row">
            <text class="label">手机号码：</text>
            <text class="value">{{ userInfo.phonenumber || '-' }}</text>
          </view>
          <view class="info-row">
            <text class="label">邮箱：</text>
            <text class="value">{{ userInfo.email || '-' }}</text>
          </view>
        </view>
      </uni-card>
    </view>

    <!-- 角色分配 -->
    <view class="role-assign-card">
      <uni-card>
        <template v-slot:title>
          <text class="card-title">角色分配</text>
        </template>
        <view class="role-list">
          <view v-for="(role, index) in roleList" :key="index" class="role-item">
            <uni-data-checkbox
                v-model="selectedRoles"
                :localdata="[{ value: role.roleId, text: role.roleName }]"
                :disabled="role.status === '1'"
                @change="handleRoleChange">
            </uni-data-checkbox>
            <view class="role-info">
              <view class="role-name">{{ role.roleName }}</view>
              <view class="role-desc">{{ role.remark || '暂无描述' }}</view>
              <view class="role-status">
                <uni-tag
                    :text="role.status === '0' ? '正常' : '停用'"
                    :type="role.status === '0' ? 'success' : 'error'"
                    size="mini">
                </uni-tag>
              </view>
            </view>
          </view>
        </view>

        <!-- 空状态 -->
        <view v-if="roleList.length === 0" class="empty-state">
          <uni-icons type="info" size="40" color="#ccc"></uni-icons>
          <text class="empty-text">暂无可分配的角色</text>
        </view>
      </uni-card>
    </view>

    <!-- 操作按钮 -->
    <view class="action-buttons">
      <button type="primary" class="btn" @click="handleSubmit" :loading="submitting">确定</button>
      <button class="btn" @click="handleCancel">取消</button>
    </view>
  </view>
</template>

<script setup>
import {getCurrentInstance, onMounted, reactive, ref} from 'vue'
import {getAuthRole, updateAuthRole} from '@/api/system/user'

const {proxy} = getCurrentInstance()

// 页面参数
const userId = ref(null)
const userName = ref('')

// 数据定义
const userInfo = reactive({})
const roleList = ref([])
const selectedRoles = ref([])
const submitting = ref(false)

// 页面加载
onMounted(() => {
  // 获取页面参数
  const pages = getCurrentPages()
  const currentPage = pages[pages.length - 1]
  const options = currentPage.options || {}

  userId.value = options.userId
  userName.value = options.userName

  if (userId.value) {
    getUserAuthRole()
  }
})

// 获取用户角色信息
async function getUserAuthRole() {
  try {
    const response = await getAuthRole(userId.value)
    if (response.code === 200) {
      Object.assign(userInfo, response.user)
      roleList.value = response.roles

      // 设置已选择的角色
      selectedRoles.value = response.roles
          .filter(role => role.flag)
          .map(role => role.roleId)
    }
  } catch (error) {
    proxy.$modal.showToast('获取用户角色信息失败')
  }
}

// 角色选择变化
function handleRoleChange(e) {
  selectedRoles.value = e.detail.value
}

// 提交
async function handleSubmit() {
  submitting.value = true

  try {
    const data = {
      userId: userId.value,
      roleIds: selectedRoles.value.join(',')
    }

    await updateAuthRole(data)
    proxy.$modal.showToast('分配成功')

    setTimeout(() => {
      handleCancel()
    }, 1500)

  } catch (error) {
    proxy.$modal.showToast('分配失败')
  } finally {
    submitting.value = false
  }
}

// 取消
function handleCancel() {
  uni.navigateBack()
}
</script>

<style lang="scss" scoped>
.container {
  min-height: 100vh;
  background-color: #f5f5f5;
  padding: 10px;
}

.user-info-card {
  margin-bottom: 15px;

  .card-title {
    font-size: 16px;
    font-weight: bold;
    color: #333;
  }

  .user-details {
    .info-row {
      display: flex;
      margin-bottom: 10px;

      .label {
        width: 80px;
        color: #666;
        font-size: 14px;
      }

      .value {
        flex: 1;
        color: #333;
        font-size: 14px;
      }
    }
  }
}

.role-assign-card {
  margin-bottom: 20px;

  .card-title {
    font-size: 16px;
    font-weight: bold;
    color: #333;
  }

  .role-list {
    .role-item {
      display: flex;
      align-items: flex-start;
      padding: 15px 0;
      border-bottom: 1px solid #f0f0f0;

      &:last-child {
        border-bottom: none;
      }

      .role-info {
        flex: 1;
        margin-left: 10px;

        .role-name {
          font-size: 15px;
          font-weight: bold;
          color: #333;
          margin-bottom: 5px;
        }

        .role-desc {
          font-size: 13px;
          color: #666;
          margin-bottom: 8px;
          line-height: 1.4;
        }

        .role-status {
          display: flex;
          justify-content: flex-end;
        }
      }
    }
  }
}

.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 50px 20px;

  .empty-text {
    margin-top: 10px;
    color: #999;
    font-size: 14px;
  }
}

.action-buttons {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: #fff;
  padding: 15px;
  box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
  display: flex;
  gap: 15px;

  .btn {
    flex: 1;
  }
}

/* 适配小程序 */
/* #ifdef MP-WEIXIN */
.action-buttons {
  position: relative;
  box-shadow: none;
  border-top: 1px solid #eee;
}

.container {
  padding-bottom: 80px;
}
</style>